#process{
    top: 0;
    z-index: 999999999;
    position: fixed;
    width: 100%;
    height: 8px;
    border-radius: 3px;
    background-color: rgb(179, 167, 167,.3);
}
#process p{
    width: 20%;
    height: 8px;
    background-color: rgb(24, 240, 121,.5);
}
.coverWeaper{
    position: relative;
    /* width: vw; */
    height:55.26vw;
    overflow: hidden;

}
#coverImg{
    display:flex;
    position:absolute;
    left:0;
    /* transition: all 200ms; */
    /* left:-30px; */
    /* width: 300vw; */
    /* height: calc(300)vw; */

}
#coverImg li{
    flex: 1;
    /* width: 500px; */
}
#coverImg img{
    width: 100vw;
    height: 100%;
}
.coverWeaper div{
    position: absolute;
    top: calc(50% - 6.5rem/2);
    width: 6.5rem;
    height: 6.5rem;
    background-color:rgba(255, 255, 255,0);
    display: flex;
    transition: all 500ms;
    opacity: 0;
}
.coverWeaper div:hover{
    cursor: pointer;
}
.coverWeaper .prev{
    left:1rem;
    /* display: none; */
}

.coverWeaper:hover .prev,
.coverWeaper:hover .next{
    /* display:flex; */
    background-color:rgba(255, 255, 255,.03);
    opacity: 1;

}
.coverWeaper .next{
    left: calc(100% - 7.5rem);
    /* display: none; */

}
.coverWeaper span{
    display: block;
    width: 3rem;
    height: 3rem;
    margin: auto;
    background-image: url(../img/iconLeft.png);
    background-size:cover;
    /* color: #fff; */
    background-repeat: no-repeat;
}
.coverWeaper .next span{
   transform: rotate(180deg);
}
.coverWeaper h3{
    display: flex;
    justify-content: center;
}
.coverWeaper p{
    z-index: 9999;
    position: absolute;
    bottom: 3%;
    opacity: 0;
    display: flex;
    /* align-items: center; */
    display: flex;
    justify-content:space-between;
}
.coverWeaper:hover p{
    opacity: 1;
}
.coverWeaper i{
    position: relative;
    margin-right: .5rem;
    display: block;
    border-radius: 50%;
    width: .7rem;
    height: 0.7rem;
    background-color:  rgb(15, 5, 5,.4);
    transition: all .2s;
    transform: scale(1);
    text-align: center;
}
.coverWeaper i:last-child{
    margin-right: 0rem;
}
.coverWeaper .nowPoint a,
 .coverWeaper i:hover a{
    position: relative;
    top: .18rem;
    left: .18rem;
    border-radius: 50%;
    display: block;
    width: 50%;
    height: 50%;
    background-color: rgba(236, 233, 233, 0.7);
    cursor: pointer;

} 
.coverWeaper .nowPoint{
    transform: scale(1.3);
}
.coverWeaper i:hover{
    transform: scale(1.3);
}


.outer{
    max-width: 1190px;
    margin: 0 auto;
    padding: 0 1.8rem;
    /* width: 100%; */
}
h2{
    margin: 2rem;
    text-align: center;
    font-size: 2rem;
}
#aboutMeOuter{
    opacity: 0;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
.aboutMe{
    font-size: .9rem;
    line-height: 1.5rem;
    margin: .3rem;
    text-indent: 2rem;
    text-align: center;
    color: #666666;
}
.signature{
    text-align: center;
    margin: 3rem 0;
}
#weaper{
    width: 100%;
    display: flex;
    /* justify-content: space-between; */
    flex-wrap: wrap;
    text-align: center;
    margin: 0 .2rem;
    margin-left: 1rem;
    
}

#weaper li{
    width:31%;
    margin-right: 2.1%;
    transition: all 700ms;
    margin-bottom: 1rem;
    border: .1px solid rgb(242,242,249);
}
#weaper li:hover{
    transform:translateY(-.8rem);
    box-shadow: 0rem .7rem .8rem .8rem #969393;
}
#weaper img{
    width: 100%;
    border-radius: .2rem;
    margin-top: .5rem;
    margin-bottom: .5rem;
}
#weaper h4{
    font-weight: bold;
    letter-spacing: .1rem;
    font-size: 15px;
    margin-top: 1rem;
    margin-bottom: .7rem;
}
#weaper h4 a{
    color: #520000;
}
#weaper p{
    margin-bottom: 2.2rem;
    font-size: 14px;
    color: #898989;
}
#sectionBlogButtonWeaper{
    display: flex;
    margin: 0 auto 8rem;
    justify-content: center;
}
#sectionBlogButton{
    display: flex;
    justify-content: center;
    /* flex: 1; */   
}
#sectionBlogButtonWeaper p,
#sectionBlogButton li{
    text-align: center;
    padding: .5rem;
    border: 1px solid #b1aeae;
    margin-right: .5rem;
    cursor: pointer;
}
/* #sectionBlogButton li{
    display: none;
} */

#sectionBlogButton #pageNum{
    font-size: 1rem;
    display: block;
    width: 1.5rem;
}

#sectionBlogButtonWeaper input{
    background-color: transparent;
    width: 3.5rem;
    border: 1px solid #b1aeae;
    /* border-right: 0px; */
    text-indent: .5rem;
    font-size: 1.5rem;
}
#sectionBlogButtonWeaper button{
    border: 1px solid #b1aeae;
    /* border-left:0px; */
    border-left: 0px;
    background-color: transparent;
    font-size: 1.2rem;
}
#sectionBlogButtonWeaper i{
    margin-right:.5rem;
    display: flex;
    flex-direction: column-reverse;
    width: 34px;
    text-align: center;
    /* display: flex; */
    /* vertical-align:bottom; */
}
#sectionBlogButtonWeaper span{
    margin-bottom: .2rem;
    font-size: 1.5rem;
}
#sectionBlogButtonWeaper p:hover,
#sectionBlogButtonWeaper button:hover,
#sectionBlogButton li:hover{
    background-color:rgba(219,213,213,.8);
    color: white;
}
#sectionBlogButtonWeaper p:active,
#sectionBlogButtonWeaper button:active,
#sectionBlogButton li:active{
    background-color:#8f8989 ;
}
#sectionBlogButtonWeaper .remindWeaper{
    display: flex;
    position: relative;
}
#sectionBlogButtonWeaper #remind{
    position: absolute;
    display: none;
    color: rgb(216, 11, 62);
    margin-left:.5rem ;
    line-height: 2.5rem;
    white-space: nowrap;
    right: -100px;
}
.nowPageNum{
    background-color:#8f8989 !important;
    color: white !important;
}
/* #sectionBlogButton li:last-child{
    margin-right:0;
} */
.idealWeaper ul{
    display: flex;
}
.section {
    display: flex;
}
.section  li{
    width: 50%;

}
.section  li img{
    width: 100%;
}
.idealWeaper ul li{
    width: 50%;
    
}
.idealTitle{
    margin-top: 4rem;
    margin-bottom: 7rem;
}

.idealTitle p{
    color: #808080;
    font-size: .95rem;
    letter-spacing: .05rem;
    line-height: 1.76rem;
    width: 90%;
    margin:0 auto 1.8rem;
}
.idealWeaper li img{
    width: 100%;
    /* box-shadow: 0 0 .9rem .02rem; */
}

.idealWeaper .idealTitleImg img{

    display: block;
    width: 90%;
    box-shadow: 0 .3rem 1.8rem 1rem #F3F3F3;
    margin: auto;
}

.section .content{
    display: flex;
    flex-direction: column;
    justify-content: center; 
}
.section .content span{
    color: #99A5C3;
}
.section .content h3{
    font-size: 1.5rem;
    font-weight: bold;
    letter-spacing: .05rem;
    margin: .6rem 0 1rem;
}
.section .content p{
    letter-spacing: .04rem;
    line-height: 1.3rem;
}
.section .content a{
    color: white;
    display: inline-block;
    /* width:20%; */
    padding: .8rem 1.9rem;
    margin-top: 2.2rem;
    background-color: #555555;
}
.section .content a:hover{
    background-color: #464646;
}
.flexRight{
    text-align: right;
}
.blogTimeWeaper{
    display: flex;
}
.blogMainWeaper{
    width: 100%;
}
.blogMainWeaper .blogBox{
    margin:.5rem 0 ;
    padding: .7rem 0;
}
.blogMainWeaper .blogBox{
    /* margin: 3rem 0; */
    width: 55%;
    display: flex;
    justify-content: space-between;

}
.blogMainWeaper .blogBox:hover{
    background-color: #757575;
}
.blogMainWeaper .blogBox:hover a{
    color: #fff;
}
.blogMainWeaper .blogBox:hover .blogPoint{
    background-color: #fff;
    border-color: #fff;
}
.blogMainWeaper .blogText{
    text-align: right;
    width: 60%;
}
.blogMainWeaper .blogText h4 a{
    font-size: .9rem;
    color: #000;
}

.blogMainWeaper .blogText span{
    color: #999999;
    font-size: .88rem;
    line-height: 1.5rem;
    /* display: block;
    height: 3rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space:nowrap; */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    
}
.blogMainWeaper .blogTimeWeaper{
    width: 35%;
}
.blogTimeWeaper .blogTime{
    white-space: nowrap;
    width: 53.81%;
}
.blogTime p{
    color: #BDBDBD;
    font-size: 2.25rem;

}
.blogTimeWeaper  i{
    display: block;
    width: 40%;
    height: 100%;
    display: flex;
}
.blogTimeWeaper .blogTime span{
    font-size: .8rem;
    color: #BDBDBD;
}
.blogTimeWeaper .blogPoint{
    width: 0.5rem;
    height: 0.5rem;
    border: .1rem solid #d1caca;
    border-radius: 50%;
    margin: auto;
}


.rightBox{
    display: flex;
    flex-direction:row-reverse ;

}
.rightBox .blogText{
    text-align: left;
}
.blogBoxWeaper{
    display: none;
}
.blogBoxWeaper:nth-child(1){
    display: flex;
}
.blogBoxWeaper:nth-child(2){
    display: flex;
}
.blogBoxWeaper:nth-child(3){
    display: flex;
}
.blogMore{
    width: 2rem;
    height: 2rem;
    border-radius:50%;
    background-color: #CFCFCF;
    margin: auto;
    background-image: url(../img/blogMore.png);
    background-size: contain;
    cursor: pointer;
}
.blogMore:active{
    background-color: #9b9696;
}
.blogLastOne{
    text-align: center;
    color: #858080;
    margin-bottom: 1rem;
}

.toTop{
    display: none;
    position: fixed;
    right: 1.5rem;
    bottom: 1rem;
    width: 2rem;
    height: 2rem;
    /* background-color: green; */
    background-image: url(../img/toTop.png);
    background-repeat: no-repeat;
    background-size: contain;
    
}
.toTop:hover {
    cursor: pointer;
    background-color: rgb(242,242,249,.2);
}